<template>
	<view class="makebody">
		<!-- 咨询人 -->
		<uni-card class="un_card">
			<view class="card_one">
				<view class="zxr">
					咨询人
				</view>
				<view class="tjzx" @click="Addsultation">
					+ 添加咨询人
				</view>
			</view>
			<view style="padding-bottom: 20rpx;padding-top: 20rpx;">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="smallcard" v-for="(item,index) in list" :key='item.id'
						:style="{ border: '1px solid' + item.bodercolors,background:item.bgcolor,marginLeft:index == 0 ? '0' : '20rpx'}">
						<view class="main">
							<view class="left_zx">
								<view class="zxname">
									{{item.realname}}
								</view>
								<view class="zxsex">
									{{item.sex == 0 ? '未知' : item.sex == 1 ? '男'  : item.sex == 2 ? '女' : '' }}
									{{item.age}}
								</view>
							</view>
							<view class="rds">
								<radio-group name="" class="radio" @change="radioChange($event,index)">
									<label>
										<radio :value="item.id" :checked="item.id === current" color=" #FF7F22" />
									</label>
								</radio-group>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-card>
		<!-- 咨询方式 -->
		<uni-card>
			<view class="zxfs">
				咨询方式
			</view>
			<view class="card_box">
				<radio-group @change="rdChange" class="card_radio">
					<view class="sp" :style="{ border: '1px solid' + bodercolor,background:bgkcolor }">
						<view class="">
							视频
						</view>
						<view class="">
							<label class="radio">
								<radio value="0" color=" #FF7F22" checked="true" />
							</label>
						</view>
					</view>
					<view class="xianx" :style="{ border: '1px solid' + borderxia,background:bgkcolors }">
						<view class="">
							线下
						</view>
						<view class="">
							<label class="radio">
								<radio value="1" color=" #FF7F22" />
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="zx_ft">
				<view class="zxsc">
					咨询时长 <text class="fenz"> (分)</text>
				</view>
				<view class="">
					<uni-number-box @change="changeValue" :value="consultantDuration" />
				</view>
			</view>
		</uni-card>
		<uni-card>
			<view class="zxtime">
				<view class="">
					咨询时间
				</view>
				<view class="">
					<uni-datetime-picker v-model="single" :start="new Date().getTime()" :border="false" hide-second="true"
						placeholder="请选择咨询时间" />
				</view>
			</view>
		</uni-card>
		<uni-card>
			<view class="ztime">
				咨询问题
			</view>
			<view>
				<textarea v-model="txtare" rows="10" placeholder="请描述咨询的问题~" class="textare"></textarea>
			</view>
		</uni-card>
		<view class="footer">
			<button class="btn3" @click="submit">立即预约</button>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog" @maskClick='close'>
				<!-- <uni-popup-dialog :type="msgType" title="预约成功" show-confirm="false" show-cancel="false"> -->

				<view class="uni_dia">
					<image :src="cgimg" mode="" style="width: 200rpx;height: 200rpx;"></image>
					<view class="uni_sucess">
						预约成功
					</view>
					<view class="uni_font" style="width: 490rpx;margin-top: 60rpx;line-height: 40rpx;">
						<!-- 您已预约成功，可在“我的-订单”或“在线”模块顶部查看 -->
						您已预约成功，“在线”模块查看
					</view>
					<button class="uni_btn" @click="Show">知道了</button>
				</view>

				<!-- </uni-popup-dialog> -->
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		userlist,
		Add
	} from '@/utils/OnetoOneaApi.js'
	import {
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	export default {
		data() {
			return {
				list: [],
				current: 0,
				single: '',
				link:'',
				id: '', //详情id
				txtare: '',
				consultantType: '0',
				type: 'center',
				cgimg: imgBaseUrl + '/img/wshing/chenggong.png',
				consultantDuration: 30,
				bodercolors: '#EBEBEB',
				bodercolor: '#FF8B25',
				borderxia: '#EBEBEB',
				bgkcolor: '',
				bgkcolors: '',
				isucess: true
			}
		},
		onLoad(detail) {
			console.log("details===============>",detail)
			this.id = detail.id
			this.link = detail.link
		},
		async onShow() {
			const data = await userlist({
				pageSize: 10000000
			})
			let arr = data.result.records.map((item) => {
				item['bgcolor'] = '#FFFFFF'
				item['bodercolors'] = '#EBEBEB'
				item['iscolor'] = false
				return item
			})
			this.list = arr
		},
		methods: {
			//选择咨询人
			radioChange(evt, index) {
				this.current = evt.detail.value
				for (let i = 0; i < this.list.length; i++) {
					if (i == index) {
						this.list[i].iscolor = true;
						this.list[i].bgcolor = '#FFFCF8'
						this.list[i].bodercolors = ' #FF8B25'

					} else {
						this.list[i].iscolor = false;
						this.list[i].bgcolor = '#FFFFFF'
						this.list[i].bodercolors = ' #EBEBEB'
					}
				}

			},
			//选择咨询方式
			rdChange(e) {
				this.consultantType = e.detail.value
				console.log(e.detail.value, 'e');
				const vl = e.detail.value
				if (vl == 0) {
					this.bodercolor = '#FF8B25'
					this.borderxia = '#EBEBEB'
					this.bgkcolor = '#FFFCF8'
					this.bgkcolors = '#FFFFFF'
				} else {
					this.borderxia = '#FF8B25'
					this.bodercolor = '#EBEBEB'
					this.bgkcolor = '#FFFFFF'
					this.bgkcolors = '#FFFCF8'
				}
			},
			//咨询时长
			changeValue(value) {
				console.log(value, 'value');
				this.consultantDuration = value

			},
			close() {
				const index = '3'
				uni.reLaunch({
					url: `../../../pages/tabbar/online/online?id=${index}`
				})
			},
			//预约
			async submit() {
				let _this = this
				uni.showLoading({
					title: '预约中',
					success:  () => {
						console.log(this.single, this.id, this.txtare, this.current, this.consultantType);
						
					}
				})
				const params = {
					consultantId: this.id,
					userId: this.current,
					consultantType: this.consultantType,
					consultantDuration: this.consultantDuration,
					consultTime: this.single == '' ? '' :this.single+":00",
					problem: this.txtare
				}
				if (this.isucess) {
					this.isucess = false
					let _this = this
					setTimeout(() => {
						_this.isucess = true
					}, 1000)
					try {
						
						const result = await Add(params)
						if (result.code == 200) {
							uni.hideLoading();
							// 在某个页面的方法中触发跳转外链
							uni.getSetting({
								withSubscriptions: true,
								success(res) {
									console.log('1', res.subscriptionsSetting);
									if (!res.subscriptionsSetting.mainSwitch) {
										uni.openSetting({ //打开设置页
											success(res) {
												console.log(res.authSetting);
											}
										})
										_this.$refs.alertDialog.open()

									} else {
										uni.requestSubscribeMessage({
											tmplIds: ['RvmE5CCOgA3px9vihL9uKtiiAGxaOEW8WXlZc37PYhA'],
											success(res) {
												console.log(res);
												if (res['RvmE5CCOgA3px9vihL9uKtiiAGxaOEW8WXlZc37PYhA'] == "accept") { // 用户点击确定后
													console.log('1111');
												}
												_this.$refs.alertDialog.open()
											}
										})
									}
								}
							})
							
						}
					} catch (e) {
						//TODO handle the exception
					}
				}
			},
			//知道了
			Show() {
				const index = '3'
				console.log("this.link",this.link)
				if(this.link == 'null'){
					uni.reLaunch({
						url: `../../../pages/tabbar/online/online?id=${index}`
					})
				}else{
					uni.navigateTo({
						url: `../../../subPackagesB/pages/WebView/WebView?url=${this.link}`
					});
				}
				
				
			},
			//添加咨询人
			Addsultation() {
				uni.navigateTo({
					url: '../../../subPackagesA/pages/addRecord/addRecord'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.makebody {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F7;

		.card_one {
			display: flex;
			justify-content: space-between;

			.zxr {
				font-size: 16px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.tjzx {
				font-size: 15px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;

		}

		.smallcard {
			display: inline-block;
			width: 280rpx;
			height: 130rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			// border: 1px solid #EBEBEB;
			margin-left: 20rpx;
		}

		.main {
			display: flex;
			justify-content: space-around;
			margin-top: 34rpx;

			.left_zx {
				.zxname {
					font-size: 15px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.zxsex {
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.zxfs {
			font-size: 16px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.card_box {

			// display: flex;
			// justify-content: space-between;
			padding-top: 20rpx;

			.card_radio {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}

			.sp {
				width: 150px;
				height: 46px;
				// background: #FFFCF8;
				border-radius: 8px 8px 8px 8px;
				opacity: 1;
				// border: 1px solid #EBEBEB;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.xianx {
				width: 150px;
				height: 46px;
				// background: #FFFCF8;
				border-radius: 8px 8px 8px 8px;
				opacity: 1;
				// border: 1px solid #EBEBEB;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.zx_ft {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.zxsc {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;

				.fenz {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.zxtime {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.ztime {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.textare {
			margin-top: 18rpx;
			background-color: #F5F5F7;
			width: auto;
			padding: 16rpx;
			border-radius: 16rpx;
		}

		.footer {
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;

			.btn3 {
				width: 690rpx;
				background: #FF8B25;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #FFFFFF;
			}
		}

		.uni_dia {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			background-color: white;
			border-radius: 20rpx;
			padding: 20px;

			.uni_sucess {
				font-size: 40rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 32rpx;
			}

			.uni_font {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 36rpx;
			}

			.uni_btn {
				width: 320rpx;
				height: 80rpx;
				background: #FF7F22;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #FFFFFF;
				margin-top: 68rpx;
			}
		}

	}
</style>